<template>
    <div class="thirdView" :style="transScale">
        <!-- 头部 -->
        <div class="header">
            <div class="title">
                <span>AEO企业降级</span>
              
            </div>
            <!-- <search-view class="searchView"></search-view> -->
            <img class="chilun1" src="../../assets/images/bigViewIMG/chilun1.png" alt="">
            <img class="chilun2" src="../../assets/images/bigViewIMG/chilun2.png" alt="">
            <div class="dateTime">
                <div class="date">{{ date }}</div>
                <div class="time">{{ time }}</div>
                <div class="week">{{ weekDate }}</div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="breadNav">
            <div class="left">
                <img src="@/assets/images/bigViewIMG2/weizhi.png" alt="">
                <div class="add">当前位置：</div>
            </div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item
                    :to="{ path: '/visual/bigscreen/viewer?reportCode=EArchives_first' }">企业E档案</el-breadcrumb-item>
                <el-breadcrumb-item>AEO企业降级</el-breadcrumb-item>

            </el-breadcrumb>
        </div>
        <!-- 查询 -->
        <div class="search">
            <el-form ref="form" :model="AEOForm" inline >
                <el-form-item>
                    <el-input v-model="AEOForm.customsCodeCname" placeholder="输入关区名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="AEOForm.customsCode" placeholder="输入关区代码"></el-input>
                </el-form-item>
                <el-form-item>
                    <!-- <el-input v-model="AEOForm.promptType" placeholder="输入处罚类型"></el-input> -->
                    <el-select v-model="AEOForm.promptType" placeholder="请选择处罚类型">
                        <el-option v-for="item in punishmentOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="AEOSearch">查询</el-button>
                    <el-button plain icon="el-icon-refresh" @click="AEOClear">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 列表 -->
        <div class="tableList">
            <el-table v-loading="loading" :data="tableDataAEO" style="width: 80%" :cell-style="{ color: '#fff' }"
                :header-cell-style="{ color: '#00ffff' }" >
                <el-table-column type="index" label="排名"></el-table-column>
                <!-- <el-table-column prop="customsName" label="关区名称" width="100"></el-table-column> -->
                <el-table-column prop="customsCode" label="关区代码" width="200"></el-table-column>
                <el-table-column prop="promptType" label="处罚类型" width="200"></el-table-column>
                <el-table-column prop="dsrWarning" label="提示信息"></el-table-column>
                <el-table-column prop="warningTime" label="预警时间" width="200"></el-table-column>
            </el-table>
            
        </div>
        <div class="pagin" v-if="tableDataAEO.length>0">
            <el-pagination background small @size-change="changeSize" @current-change="changePage"
                :current-page="AEOForm.page" :page-size="AEOForm.size" layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    

    </div>
</template>

<script>
import Title from './components/title.vue'
import { getDate, getTime, getWeekDate } from "@/utils/date.js";
import { reqEnterpriseDemotionDetailS } from '@/api/home/index.js'
export default {
    components: {
        Title,
    },
    data() {
        return {
            loading:false,
            client: ["1920", "1080"],
            scale_x: 1,
            scale_y: 1,
         
            date: "2021-01-01",
            time: "00:00:00",
            weekDate: "星期一",
            timer: null,
            AEOForm:{
                customsCodeCname:null,
                customsCode:null,
                promptType:null,
                page:1,
                size:10
            },
            punishmentOptions:[
                { value: '已超过行政处罚预警值', label:'已超过行政处罚预警值'},
                { value: '报关企业行为提示', label: '报关企业行为提示' },
                { value: '企业查获比率提示', label: '企业查获比率提示' },
                { value: '企业通用提示', label: '企业通用提示' },
            ],
            tableDataAEO:[
              
            ],
            total:0
        }
    },
    created() {
        this.AEOSearch()
    },
    computed: {
       
     
        transScale() {
            return `transform: scale(${this.scale_x}, ${this.scale_y});
              background-size: 100% 100%;
              transform-origin: left top; 
              overflow: hidden;
              width:${this.client[0]}px;height:${this.client[1]}px;position: absolute;`;
        }
    },
    mounted() {
        this.initClock();
        this.timer = setInterval(() => {
            this.initClock();
        }, 1000);
        window.addEventListener("resize", this.resizeHandler);
        this.resizeHandler();
    },
    methods: {
        // 修改页码
        changeSize(val){
            this.AEOForm.size=val
            this.AEOSearch()
        },
        changePage(val){
            this.AEOForm.page=val
            this.AEOSearch()
        },
        // 重置
        AEOClear(){
            this.AEOForm={
                customsCodeCname: null,
                customsCode: null,
                promptType: null,
                page: 1,
                size: 10
            }
            this.AEOSearch()
        },
        // 搜索
         AEOSearch(){
            this.loading=true
           reqEnterpriseDemotionDetailS(this.AEOForm).then(res=>{
               this.total = res.data.total
               this.tableDataAEO = res.data.list
               this.loading = false
           }).catch((res)=>{
               this.loading = false
              
               
           })
            
            

        },
        initClock() {
            this.date = getDate();
            this.time = getTime();
            this.weekDate = getWeekDate();
        },
    
        resizeHandler() {
            this.scale_x = `${document.documentElement.clientWidth}` / this.client[0];
            this.scale_y = `${document.documentElement.clientHeight}` / this.client[1];
        },

    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);

        }
        window.removeEventListener("resize", this.resizeHandler);
    },
}
</script>

<style lang="scss" scoped>
.thirdView {
    width: 100%;
    height: 100%;
    background: url('../../assets/images/bigViewIMG/bg.png') no-repeat;
    background-size: 100% 100%;

    // padding: 0 20px;
    .header {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            justify-content: center;

            width: 100%;
            height: 70px;
            background-image: url('../../assets/images/bigViewIMG/navbar.png');
            background-size: 100% 100%;

            span {
                font-size: 32px;
                color: #00ffff;
                font-weight: 400;
            }

            .second {
                margin-left: 5px;
                font-size: 32px;
                color: #00ffff;
                font-weight: 400;
                // font-family: '华文楷体'
            }
        }

        .searchView {
            position: absolute;
            top: 22px;
            left: 23px;
        }

        .chilun1 {
            width: 138px;
            height: 48px;
            position: absolute;
            top: 22px;
            left: 1252px;
        }

        .chilun2 {
            width: 138px;
            height: 48px;
            position: absolute;
            top: 22px;
            left: 506px;
        }

        .dateTime {
            position: absolute;
            top: 20px;
            left: 1575px;
            width: 325px;
            height: 36px;
            display: flex;
            color: #fff;
            // text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;

            .time {
                margin-left: 5px;
            }

            .week {
                margin-left: 5px;
            }
        }
    }

    .breadNav {
        margin-left: 10px;
        height: 40px;
        display: flex;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            img {
                width: 16px;
                height: 16px;
            }

            .add {
                margin-left: 10px;
                margin-right: 10px;
                color: #fff;
                font-size: 16px;
            }
        }

        ::v-deep .el-breadcrumb {
            .el-breadcrumb__item {
                .el-breadcrumb__inner {
                    color: #00ffff;
                    font-size: 16px;
                }

                .is-link {
                    color: #fff;
                }
            }
        }
    }
    .search {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        ::v-deep .el-input .el-input__inner {
                height: 36px;
                line-height: 36px;
            }
        
            ::v-deep .el-button {
                padding: 10px 20px;
                font-size: 14px;
                border-radius: 3px;
            }
    }
    .tableList {
        margin-top: 20px;
        ::v-deep .el-table {
            margin: 0 auto;
            .el-loading-mask {
                    background-color: rgba(255, 255, 255, 0);
            
            
                    .el-loading-spinner .circular {
                        width: 30px;
                        height: 30px;
                    }
            
                    .el-loading-spinner .path {
                        stroke: #c23531;
                        stroke-width: 8px;
                    }
                }
        }
        ::v-deep .el-table,
        ::v-deep .el-table__expanded-cell {
            background-color: transparent !important;

        }

        /* 表格内背景颜色 */

        ::v-deep .el-table tr,
        ::v-deep .el-table td {
            background-color: transparent !important;
            border-bottom: none;
        }

        ::v-deep .el-table th {
            background-color: #013689 !important;
            border-bottom: none;

        }

        ::v-deep .el-table td {
            border-bottom: none;
        }

        ::v-deep .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
        }
    }
    .pagin {
        margin-top: 20px;
        display: flex;
        margin-right: 10%;
        justify-content: flex-end;

        ::v-deep .el-pagination__total {
            color: #fff;
        }
    }

   
}
</style>